<script setup>
import { ref, inject, nextTick, onMounted } from "vue";

import {
  activitiInfoStore,
  useActivitiInfo,
} from "@/components/Activiti/ApprovalInfo/hooks/use-activiti-info.js";

/**
 * 工作流数据
 * @description
 * 从依赖注入内获取到的 工作流信息存储值
 * @type { import("vue").Ref< typeof activitiInfoStore > }
 */
const activitiInfo = inject("activitiInfo");

/** 审批内容 最大输入长度 */
const maxlength = ref(1000);

const textarea = ref("");

/** 标题名称 */
const titleName = ref("审批");
</script>

<template>
  <section class="ActivitiAside-root">
    <section class="title">
      {{ titleName }}
    </section>

    <section class="main">
      <section class="input">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          show-word-limit
          :maxlength="maxlength"
          :rows="15"
        >
        </el-input>
      </section>

      <section class="button-layout">
        <el-button type="primary" size="default" @click=""> 审批 </el-button>

        <el-button type="primary" size="default" @click=""> 审批 </el-button>

        <el-button type="primary" size="default" @click=""> 审批 </el-button>

        <el-button type="primary" size="default" @click=""> 审批 </el-button>

        <el-button type="primary" size="default" @click=""> 审批 </el-button>

        <el-button type="primary" size="default" @click=""> 审批 </el-button>
      </section>
    </section>
  </section>
</template>

<style lang="scss" scoped>
@import "~@/components/Activiti/ApprovalInfo/styles/var.scss";

$gap: $half-gap;

.ActivitiAside-root {
  width: 100%;
  height: 100%;

  background-color: $bg-white;

  @include std-box-shadow();

  .title {
    font-size: 18px;
    line-height: 50px;
    font-weight: bold;
    background: #f5f5f5;
    text-align: center;
  }

  .main {
    padding: $gap;
    gap: $gap;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .input {
    }

    .button-layout {
    }
  }
}
</style>
